<!-- 组件html内容 -->
<template>
  <!-- 一定要有一个根标签div class属性值是组件名称 -->
  <div class="LogIndex">
    <el-row :gutter="20">
      <el-col :span="4">
        <el-input v-model="searchData.path" placeholder="请求路径搜索..."></el-input>
      </el-col>
      <el-col :span="4">
        <el-input v-model="searchData.methodName" placeholder="方法名称搜索..."></el-input>
      </el-col>
      <el-col :span="4">
        <el-select v-model="searchData.methodType" clearable placeholder="查询请求类型">
            <el-option label="GET" :value="1"></el-option>
            <el-option label="POST" :value="2"></el-option>
            <el-option label="PUT" :value="3"></el-option>
            <el-option label="DELETE" :value="4"></el-option>
            <el-option label="其他" :value="5"></el-option>
          </el-select>
      </el-col>
      <el-col :span="4">
        <el-select v-model="searchData.resType" clearable placeholder="查询日志类型">
            <el-option label="正常" :value="1"></el-option>
            <el-option label="异常" :value="2"></el-option>
          </el-select>
      </el-col>

      <el-col :span="4">
        <el-button @click="search" type="primary">搜索</el-button>
        <el-button @click="reset">重置</el-button>
      </el-col>
    </el-row>
    <el-row style="margin-top:10px;">
      <el-col>
        <el-button @click="moreDelete" type="danger">批量删除</el-button>
        <el-button @click="exporExcl">数据导出</el-button>
      </el-col>
    </el-row>

    <el-row style="margin-top: 10px;">
      <el-table height="590"  border :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">

        <el-table-column type="selection" width="55">
        </el-table-column>

        <el-table-column prop="path" label="请求路径">
        </el-table-column>
        <el-table-column prop="getTime" label="请求时间">
          <template slot-scope="scope">
            <el-tag >{{ milTimeToDateStr(scope.row.getTime) }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="overTime" label="响应时间">
          <template slot-scope="scope">
            <el-tag >{{ milTimeToDateStr(scope.row.overTime) }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="time" label="花费时间">
          <template slot-scope="scope">
            <el-tag >{{ scope.row.time }} 毫秒</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="methodName" label="方法名">
        </el-table-column>
        <el-table-column prop="methodType" label="请求类型">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.methodType == 1" >GET</el-tag>
            <el-tag v-else-if="scope.row.methodType == 2" type="success">POST</el-tag>
            <el-tag v-else-if="scope.row.methodType == 3" type="info">PUT</el-tag>
            <el-tag v-else-if="scope.row.methodType == 4" type="warning">DELETE</el-tag>
            <el-tag v-else type="danger">其他</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="parameter" label="请求参数">
        </el-table-column>
        <el-table-column prop="methodDesc" label="方法描述">
        </el-table-column>
        <el-table-column prop="modelName" label="模块名称">
        </el-table-column>
        <el-table-column prop="resType" label="请求结果">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.resType == 1" type="success">正常</el-tag>
            <el-tag v-else type="danger">异常</el-tag>
          </template>
        </el-table-column>

      </el-table>
    </el-row>

    <el-row style="margin-top: 10px;">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="pager.currentPage" :page-sizes="[5, 10, 20, 30, 100]" :page-size="pager.pageSize"
        layout="total, sizes, prev, pager, next, jumper" :total="pager.total">
      </el-pagination>
    </el-row>

  </div>
</template>

<!-- 组件js部分 -->
<script>

  export default {
    name: 'LogIndex', //组件的名称-要和文件名相同（驼峰规则命名）
    data() {
      return {
        // 当前需要查看或编辑的行数据
        nowEditOrShowData: {
          logID: null,
        },
        pager: {
          // 当前的页码
          currentPage: 1,
          pageSize: 5, // 每页显示的行数
          total: 100, // 数据的总条目数
        },
        // 当前表格复选框选中的数据
        nowSelectList: [],
        // 搜索表单对象
        searchData: {
          path: null,
          methodName: null,
          methodType:null,
          resType:null
        },
        // 表格原始数据
        tableData: []
      }
    },
    mounted() {
      this.initTable();
    },
    methods: {
      // 时间戳日期转日期字符串
      milTimeToDateStr(param){
        let date = new Date(param);

        let dateStr = date.getFullYear() + "-" + (parseInt(date.getMonth()+1)) + "-" + date.getDate() + " "+date.getHours()+":"+date.getMinutes()+":"+date.getSeconds();

        return dateStr;
      },
      // 点击搜索
      search() {
        this.initTable();
      },
      // 点击重置
      reset() {
        // 1.清空表单
        this.searchData = {
          path: null,
          methodName: null,
          methodType:null,
          resType:null
        };

        // 2.再查询表格数据
        this.initTable();
      },
      // 渲染表格方法
      initTable() {
        // TODO: 查询后端接口渲染表格数据
        let _this = this;
        this.$axios.get('/mylog/getLogPages', {
            params: {
              // GET请求参数
              ..._this.searchData,
              page: _this.pager.currentPage,
              size: _this.pager.pageSize
            }
          }) // http://localhost:25100/api/user/getUserByID/101
          .then(function(res) {
            console.dir("--分页查询--");
            if (res.data.code == 200) { // 业务成功
              _this.$message.success(res.data.msg);
              _this.tableData = res.data.data.rows;
              _this.pager.total = res.data.data.total;
            } else {
              _this.$message.error(res.data.msg);
            }
          })
          .catch(function(error) { // 请求失败处理
            console.log(error);
          });
      },
      // 表格上方的-导出数据
      exporExcl() {
        // TODO： 根据现有的查询条件导出完整数据
      },
      // 表格选中或取消选中复选框触发的回调
      handleSelectionChange(param) {
        // param: 当前选中的表格数据
        this.nowSelectList = param;
      },
      // 当分页条目数切换时
      handleSizeChange(param) {
        // param: 每页显示的行数
        this.pager.pageSize = param;
        // 再查询数据
        this.initTable();
      },
      // 当选中页码时回调
      handleCurrentChange(param) {
        // param: 当前选中的页码数
        this.pager.currentPage = param;
        // 再查询数据
        this.initTable();
      },
      // 当添加、编辑、详情组件关闭弹窗时
      needClose(param) {
        this.dialogState = false;
        if (param != 3) {
          this.initTable();
        }
      }
    },
    watch: {

    }
  }
</script>

<!-- 3.组件的css样式部分 scoped：当前声明的样式只提供给当前组件使用 -->
<style scoped>

</style>
